<!--css-->
<link href="css/bootstrap.css" rel="stylesheet" />
<link href="css/navbar.css" rel="stylesheet" />
<link href="css/login.css" rel="stylesheet" />
<!--end css-->

<!--nabvar-->

<link href="css/bootstrap.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <!-- Brand and toggle get grouped for better mobile display -->
  <div class="navbar-header">
    <a class="navbar-brand" href="#">MeteoCal</a>
  </div>
</nav>
<!--end nabvar-->

<!--images and login-->
<div class="container">
    <div class="row">
        <div class="col-md-4">
          <img class="index-image-left img-rounded" src="imgs/index1.jpg">
        </div>
        <div class="col-md-4">

            <div id="formLogin" class="form-login">
                <h4>Welcome back.</h4>
                <input type="text" id="userEmail" class="form-control input-sm chat-input" placeholder="email" />
                </br>
                <input type="text" id="userPassword" class="form-control input-sm chat-input" placeholder="password" />
                </br>
                <div class="wrapper">
                <span class="group-btn">     
                    <a href="#" id="buttonSignup" class="btn btn-info btn-md">register </a>
                    <a href="profile.html" id="buttonLogin" class="btn btn-primary btn-md">login </a>
                </span>
                </div>
            </div>

            <div id="formRegister" class="form-register invisible">
                <h4>Register to MeteoCal.</h4>
                <input type="text" id="userEmail" class="form-control input-sm chat-input" placeholder="email" />
                </br>
                <input type="text" id="userPassword" class="form-control input-sm chat-input" placeholder="password" />
                </br>
                <input type="text" id="userPasswordConfirmation" class="form-control input-sm chat-input" placeholder="confirm password" />
                </br>
                <div class="wrapper">
                <span class="group-btn">     
                    <a href="#" id="buttonCancel" class="btn btn-warning btn-md">cancel </a>
                    <a href="#" id="buttonRegister" class="btn btn-primary btn-md">register </a>
                </span>
                </div>
            </div>        
        </div>

        <div class="col-md-4">
          <img class="index-image-right img-rounded" src="imgs/index2.jpg">
        </div>
    </div>
</div>
<!--end images and login-->

<!--extra content-->
<div class="container">
    <div class="row">
        <div>
            <div class="col-md-3">
            </div>
            <div class="col-md-6 box">
                <div class="box-icon">
                    <span class="fa fa-4x fa-html5">MeteoCal logo</span>
                </div>
                <div class="info">
                    <h4 class="text-center">About MeteoCal</h4>
                    <p>MeteoCal is an weather based event organizer platform, you can meet with your friends and invite them to your events, or even better, you can get invited to a lot of events! When an event is outdoors, MeteoCal will advise you the weather forecast for the place of the event for you to be ready to enjoy it completely!</p>
                    <a href="" class="btn">Learn more</a>
                </div>
            </div>
        </div>
  </div>
</div>
<!--end extra content-->


<script src="js/jquery.min.js"></script>
<script src="js/switchloginregister.js"></script> 